<template>
	<view class="register">
		<view class="from">
			<view class="input">
				<view class="title">姓名：</view>
				<input v-model="basic.agentName" placeholder="请输入姓名" />
			</view>
			<view class="input">
				<view class="title" style="width: 200rpx;">手机号：</view>
				{{phone}}
				<!-- <input type="number" maxlength="11" v-model="basic.mobile" placeholder="请输入手机号" @blur="is_agent" /> -->
			</view>
			<view class="input">
				<view class="title">密码：</view>
				<input type="password" maxlength="18" v-model="password" placeholder="请输入密码" />
			</view>
			<view class="input">
				<view class="title">微信号：</view>
				<input v-model="basic.wechatNum" placeholder="请输入微信号" />
			</view>
			<view class="input">
				<view class="title">微信昵称：</view>
				<input v-model="basic.wechatNickName" placeholder="请输入微信昵称" />
			</view>
			<view class="input">
				<view class="title">邮箱号：</view>
				<input v-model="basic.email" placeholder="请输入邮箱号" />
			</view>
			<view class="input">
				<view class="title">所属银行：</view>
				<input v-model="settle.bankCode" placeholder="请输入所属银行" />
			</view>
			<view class="input">
				<view class="title">支行信息：</view>
				<input v-model="settle.bankBranch" placeholder="请输入支行信息" />
			</view>
			<view class="input">
				<view class="title">银行卡号：</view>
				<input type="number" v-model="settle.bankCard" placeholder="请输入银行卡号" maxlength="20" />
			</view>
			<view class="input">
				<view class="title">银行卡正面：</view>
				<view class="upload" @click="uploadbank">
					<uni-icons type="plusempty" size="80" class="right" color="#e1e1e1" v-if="!settle.bankCardFront" />
					<image :src="imgCDNUrl + settle.bankCardFront" mode="" v-else class="img"></image>
				</view>
			</view>
			<view class="input">
				<view class="title">身份证号：</view>
				<input v-model="info.idCard" placeholder="请输入身份证号" maxlength="18" />
			</view>
			<view class="input">
				<view class="title">身份证正面：</view>
				<view class="upload" @click="upidCardFront">
					<uni-icons type="plusempty" size="80" class="right" color="#e1e1e1" v-if="!info.idCardFront" />
					<image :src="imgCDNUrl + info.idCardFront" mode="" v-else class="img"></image>
				</view>
			</view>
			<view class="input">
				<view class="title">身份证反面：</view>
				<view class="upload" @click="upidCardBack">
					<uni-icons type="plusempty" size="80" class="right" color="#e1e1e1" v-if="!info.idCardBack" />
					<image :src="imgCDNUrl + info.idCardBack" mode="" v-else class="img"></image>
				</view>
			</view>
			<view class="input">
				<view class="title">地区：</view>
				<view class="flex" @tap="toggleTab('linkage')">
					<view v-if="resultInfo.result">
						<text>{{ resultInfo.result }}</text>
						<uni-icons type="arrowdown" size="24" class="right" color="#999" />
					</view>
					<view v-else style="color: #666;" >
						请选择地址
						<uni-icons type="arrowdown" size="24" class="right" color="#999" />
					</view>
				</view>
			</view>
			<view class="input">
				<view class="title">邀请码：</view>
				<input v-model="yaoqing.code" placeholder="请输入邀请码" @blur="is_agentcode" />
			</view>
			<view class="button" @click="registerAccount">立即申请</view>
		</view>
	<w-picker
		mode="linkage"
		:level="3"
		@confirm="onConfirm"
		ref="linkage"
		:linkList="addrlist"
		themeColor="#007AFF"
	></w-picker>
		
		  
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import proposer from '../../servers/agent/proposer.js';
import wPicker from '@/components/w-picker/w-picker.vue';
export default {
	components: { uniIcons, wPicker },
	data() {
		return {
			defaultVal:[],
			resultInfo: {
				result: ''
			},
			password: '',
			basic: {
				agentName: '',
				email: '',
				loginName: '',
				mobile: '',
				wechatNickName: ''
			},
			info: {
				city: '',
				cityCode: '',
				idCard: '',
				idCardBack: '',
				idCardFront: '',
				province: '',
				region: '',
				regionCode: ''
			},
			settle: {
				bankBranch: '',
				bankCard: '',
				bankCardBack: '',
				bankCardFront: '',
				bankCode: ''
			},
			yaoqing: {
				code: '',
				name: ''
			},
			is_mobile: false,
			is_code: false,
			agentSn: '',
			city: '',
			province: '',
			area: '',
			citycode: '',
			provincecode: '',
			areacode: '',
			bank: '',
			bankimg: '',
			addrlist:[],
			phone:''
			
		};
	},
	mounted() {
		this.getaddr();
	},
	onLoad(option) {
		console.log(option.phone)
		this.phone=option.phone;
	},
	methods: {
		toggleTab(str) {
			this.$refs[str].show();
		},
		// 省市区选择
		onConfirm(val) {
			console.log(val);
			this.province = val.checkArr[0];
			this.city = val.checkArr[1];
			this.area = val.checkArr[2];
			this.provincecode = val.checkValue[0];
			this.citycode = val.checkValue[1];
			this.areacode = val.checkValue[2];
			this.resultInfo = { ...val };
			console.log(this.province,this.city,this.area,this.provincecode,this.citycode,this.areacode)
		},
		getaddr(){
			proposer
				.cityArea()
				.then(res => {
					if (res.code === 200) {
						this.addrlist=res.data;
					} else {
						console.log(res.msg)
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
				.catch(err => {
					
					console.log(new Error('请检查网络后重试'));
				});
		},
		
		// 上传银行卡
		uploadbank() {
			this.upimg(1);
		},
		// 上传身份证
		upidCardFront() {
			this.upimg(2);
		},
		upidCardBack() {
			this.upimg(3);
		},
		upimg(e) {
			var that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					// that.bank = res.tempFilePaths;
					uni.showLoading({
						title: '上传中'
					});
					uni.uploadFile({
						url: that.upFileUrl, //上传地址
						filePath: res.tempFilePaths[0], //上传图片本地地址
						name: 'file',
						formData: {
							user: 'test'
						},
						success: uploadFileRes => {
							uni.hideLoading();
							var jsArr = JSON.parse(uploadFileRes.data);
							if (jsArr.code == 200) {
								uni.showToast({
									title: '上传成功',
									duration: 2000
								});
								if (e == 1) {
									that.settle.bankCardFront = jsArr.data;
								} else if (e == 2) {
									that.info.idCardFront = jsArr.data;
								} else if (e == 3) {
									that.info.idCardBack = jsArr.data;
								}
								// that.initData.image = that.imgCDNUrl + jsArr.msg;
								// e = jsArr.msg;
								// console.log(jsArr.msg);
							} else {
								uni.showToast({
									title: '上传失败,请检查网络后重试',
									duration: 2000,
									icon: 'none'
								});
							}
						},
						fail: err => {
							uni.hideLoading();
							uni.showToast({
								title: '上传失败,请检查网络后重试',
								duration: 2000,
								icon: 'none'
							});
						}
					});
				}
			});
		},
		is_agent() {
			var m = this.basic.mobile;
			this.is_mobile = false;
			if (!m) {
				return;
			}
			if (!this.checkPhone(m)) {
				uni.showToast({
					title: '手机号码有误，请重填',
					duration: 2000,
					icon: 'none'
				});
				return;
			} else {
				proposer
					.checkMobile({ mobile: m })
					.then(res => {
						if (res.code === 200) {
							this.is_mobile = true;
							uni.showToast({
								title: '手机号可用',
								duration: 2000,
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			}
		},
		checkPhone(e) {
			if (!/^1[3456789]\d{9}$/.test(e)) {
				// alert("手机号码有误，请重填");
				return false;
			} else {
				return true;
			}
		},
		is_agentcode() {
			this.is_code = false;
			if (this.yaoqing.code) {
				proposer
					.checkSn({ agentSn: this.yaoqing.code })
					.then(res => {
						if (res.code === 200) {
							this.is_code = true;
							uni.showToast({
								title: '邀请码可用',
								duration: 2000,
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '网络连接失败,请检查网络后重试',
							duration: 2000,
							icon: 'none'
						});
					});
			}
		},
		registerAccount() {
			if (!this.basic.agentName) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名',
					duration: 2000
				});
				return;
			}
			if (!this.basic.mobile) {
				uni.showToast({
					icon: 'none',
					title: '请输入的手机号',
					duration: 2000
				});
				return;
			}
			if (!this.is_mobile) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号',
					duration: 2000
				});
				return;
			}
			if (!this.password || this.password.length < 8) {
				uni.showToast({
					icon: 'none',
					title: '请输入密码，长度最小为8位',
					duration: 2000
				});
				return;
			}
			if (!this.basic.wechatNickName) {
				uni.showToast({
					icon: 'none',
					title: '请输入微信昵称',
					duration: 2000
				});
				return;
			}
			if (!this.basic.wechatNum) {
				uni.showToast({
					icon: 'none',
					title: '请输入微信号',
					duration: 2000
				});
				return;
			}
			if (!this.basic.email) {
				uni.showToast({
					icon: 'none',
					title: '请输入邮箱',
					duration: 2000
				});
				return;
			}
			var reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$"); 
			if (!reg.test(this.basic.email)) {
				
				uni.showToast({
					icon: 'none',
					title: '请输入正确的邮箱',
					duration: 2000
				});
				return;
			}
			if (!this.area) {
				uni.showToast({
					icon: 'none',
					title: '请选择地址',
					duration: 2000
				});
				return;
			}
			if (!this.yaoqing.code) {
				uni.showToast({
					icon: 'none',
					title: '请输入邀请码',
					duration: 2000
				});
				return;
			}
			if (!this.is_code) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的邀请码',
					duration: 2000
				});
				return;
			}
			var da = {
				basic: this.basic,
				info: this.info,
				settle: this.settle,
				agentSn: this.yaoqing.code,
				password: this.password
			};
			da.info.province = this.province;
			da.info.city = this.city;
			da.info.region = this.area;
			da.info.provinceCode = this.provincecode;
			da.info.cityCode = this.citycode;
			da.info.regionCode = this.areacode;
			proposer
				.applyForAgent(da)
				.then(res => {
					if (res.code === 200) {
						this.is_mobile = true;
						uni.showToast({
							title: '申请成功',
							duration: 2000
						});
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/shop/my'
							});
						}, 2000);
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
				.catch(err => {
					uni.showToast({
						title: '申请失败,请检查网络后重试',
						duration: 2000,
						icon: 'none'
					});
				});
		}
		// go_code() {
		// 	if(!this.isPhoneNumber(this.input.mobile)) {
		// 		uni.showToast({
		// 			icon:'none',
		// 		    title: '请输入正确的手机号',
		// 		    duration: 2000
		// 		});
		// 		return
		// 	}
		// 	if (!this.code) {
		// 		uni.showToast({
		// 		    title: "请输入图形验证码",
		// 			icon:'none',
		// 			position:'bottom'
		// 		})
		// 		return
		// 	}

		// 	if(!this.input.mobile){
		// 		uni.showToast({
		// 		    title: "请输入手机号",
		// 			icon:'none',
		// 			position:'bottom'
		// 		})
		// 		return
		// 	}

		// 	let data = {
		// 		mobile:this.input.mobile
		// 	}
		// },

		// isPhoneNumber(tel) {
		//     var reg =/^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
		//     return reg.test(tel);
		// }
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}


.register {
	background: #fff;
	height: 100%;
	padding-top: 20rpx;
	.headline {
		background: #bd3c8c;
		color: #fff;
	}
	.from {
		.input {
			margin: 30rpx 44rpx;
			position: relative;
			display: flex;
			align-items: center;
			.title {
				display: inline-block;
				width: 260rpx;
				font-size: 30rpx;
			}
			input,
			.flex {
				border: 1px solid #e1e1e1;
				width: 100%;
				height: 86rpx;
				line-height: 86rpx;
				font-size: 28rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
			}

			.upload {
				border: 1px solid #e1e1e1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 300rpx;
				.img {
					width: 100%;
					height: 300rpx;
				}
			}
		}

		.button {
			line-height: 90rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			margin: 67rpx 34rpx;
			box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
		}
	}
}
</style>
